<template>
	<view class="main">
		<u-popup ref="popupRef" :mask-close-able="false" mode="center" width="80%" height="auto"
			:custom-style="customStyle" :safe-area-inset-bottom="true" v-model="pop" :close-icon-size="36"
			close-icon-color="#fff">
			<view class="content">
				<scroll-view scroll-y="true" class="scroll">
					<image v-if="!show" class="main-image" mode="widthFix" :src="path" bg-color="white"></image>
					<view v-else style="text-align: center;">
						<u-loading :show="show" class="loading" size="84" mode="flower"></u-loading>加载中...
					</view>
					<l-painter ref="painterRef" :board="poster" isCanvasToTempFilePath
						@success="path = $event;show = false;" hidden />
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		name: "adv",
		props: {
			config: Object,
		},
		data() {
			return {
				isShare: false,
				customStyle: {
					backgroundColor: "transparent",
					height: "90vh",
					marginTop: "20rpx",
				},
				path: "",
				pop: true,
				loading: false,
				show: true,
				poster: {
					views: [{
						css: {
							boxSizing: "border-box",
							background: "#fff",
							width: "100%",
							height: "100%",
							boxShadow: "0 20rpx 20rpx #e4e4e4",
						},
						views: [{
								src: this.config.pic,
								type: "image",
								css: {
									objectFit: "fill",
									objectPosition: "50% 50%",
									width: "100%",
								},
							},
							{
								css: {
									marginTop: "10rpx",
									marginLeft: "10rpx",
									position: 'absolute',
									bottom: '100rpx',
									left: '4%',
									width: "90%",
									borderRadius: '5rpx',
									background: "#fff",
								},
								views: [
									//左边
									{
										type: "view",
										css: {
											display: "flex",
											flexDirection: "column",
											width: "70%",
											marginTop: "30rpx",
										},
										views: [
											{	//头像昵称
												type: "view",
												css: {
													width: "100%",
													display: "flex",
													flexDirection: "row",
												},
												views: [{
														src: this.config.headavatar,
														type: "image",
														css: {
															background: "#fff",
															objectFit: "cover",
															marginRight: "20rpx",
															marginBottom: "10rpx",
															marginLeft: "30rpx",
															border: "2rpx solid #fff",
															boxSizing: "border-box",
															height: "80rpx",
															width: "80rpx",
															borderRadius: "50%",
														},
													},
													{
														type: "view",
														css: {
															flex: "1",
															display: "flex",
															flexDirection: "column",
														},
														views: [
															{
																css: {
																	display: "flex",
																},
																views: [{
																	text: uni.getStorageSync(
																			'userInfo')
																		.nickname,
																	type: "text",
																	css: {
																		display: "flex",
																		color: "#333333",
																		fontSize: "30rpx",
																		marginRight: "10rpx",
																	},
																}],
															},
															{
																css: {
																	display: "flex",
																},
																views: [{
																	text: uni.getStorageSync(
																			'userInfo')
																		.invitation_code,
																	type: "text",
																	css: {
																		display: "flex",
																		color: "#666666",
																		fontSize: "23rpx",
																		marginRight: "5rpx",
																		marginTop: "2rpx",
																	},
																}],
															},
														]
													}
												]
											},
											{	//描述
												type: "text",
												css: {
													width: "100%",
													marginLeft: "30rpx",
													color: '#666666',
													fontSize: '24rpx',
													marginTop: "5rpx",
												},
												text: '奢侈品女性用户方可扫码申请入会'
											}
										],
									},
									//二维码
									{
										type: "image",
										src: this.config.qrcode,
										css: {
											objectFit: "fill",
											width: "160rpx",
											height: "160rpx",
											marginLeft: "10rpx",
											marginTop: "10rpx",
											marginBottom: '10rpx'
										},
									},
								],
								type: "view",
							},
						],
						type: "view",
					}, ],
				},
			};
		},
		watch: {
			pop: {
				handler(newval, oldVal) {
					if (!newval) {
						this.$emit("close");
					}
				}
			},
			show(newV) {
				if (!newV) {
					this.isShare = true
				}
			}
		},
		methods: {
			handleshareEvent() {
				this.$refs.painterRef.canvasToTempFilePathSync({
					fileType: "jpg",
					pathType: "url",
					quality: 1,
					success: (res) => {
						console.log(res.tempFilePath)
						wx.showShareImageMenu({
							path: res.tempFilePath,
							success: () => {
								this.isShare = false
								this.show = false
								this.pop = false
							},
							fail: () => {
								this.isShare = false
								this.show = false
								this.pop = false
							}
						})

					},
				})
			},
			//父组件ref触发打开弹窗
			init() {
				this.pop = true;
			},
			cancelShare() {
				this.isShare = false
				this.show = false
				this.pop = false
			}
		},
	};
</script>
<style lang="scss" scoped>
	button {
		font-size: 28rpx;
		font-weight: 300;
		color: #999999;
		padding: 0;
		background: none;

	}

	button::after {
		border: 0 !important;
	}

	.main {
		width: 100vw;
		height: auto;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		z-index: 10;

		.content {
			display: flex;
			flex-direction: column;
			height: 100%;
			width: 100%;
			background-color: transparent;

			.scroll {
				height: 100%;
				background-color: transparent;
				min-height: 50%;
			}
		}

		.btn {
			padding: 20rpx 0;

			&-text {
				width: 90%;
				height: 70rpx;

				border-radius: 36rpx;
				text-align: center;
				line-height: 70rpx;
			}
		}

		.main-image {
			width: 100%;
			height: 90vh;
		}
	}
</style>